<template>
  <div style="width:100vw ;height: 100vh; position:absolute; top: 0; overflow: hidden;">
    <img :src="coverAdvance" alt="" style="width: 100vw; z-index: 0">
  </div>
  <navigator-menu></navigator-menu>

  <!-- 举报 -->
  <el-card shadow="always" style="width:23vw; height:33vw; border-radius: 35px 35px 35px 35px; margin: 9vw 15vw 1vw 36vw; opacity: 0.95">
      <span style="font-size: 25px;">举报</span>
      <el-divider></el-divider>
      <h4>举报原因</h4>
      <el-select v-model="reportType" placeholder="请选择举报原因">
        <el-option-group
          v-for="group in reportMsg"
          :key="group.label"
          :label="group.label"
        >
          <el-option
            v-for="item in group.options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-option-group>
      </el-select>
      <h4>补充理由描述</h4>
      <el-input v-model="reportReason" :rows="3" type="textarea" placeholder="请详细描述您的举报理由(不多于500字)："></el-input>
      <h4>补充截图证明</h4>
      <el-upload
        class="avatar-uploader"
        action="https://jsonplaceholder.typicode.com/posts/"
        :show-file-list="false"
        :on-success="handleAvatarSuccess"
        :before-upload="beforeAvatarUpload"
      >
        <img v-if="reportImageUrl" :src="reportImageUrl" class="avatar" />
        <el-icon v-else class="avatar-uploader-icon"><plus /></el-icon>
      </el-upload>
      <el-button type="primary" style="margin:10px 0 0 4vw;" @click="sendReport">举报</el-button>
      <el-button type="primary" style="margin:10px 0 0 3vw;">取消</el-button>
  </el-card>

</template>

<script>
import { ref } from '@vue/reactivity';
import NavigatorMenu from "../components/NavigatorMenu";

export default {
  name: "Report",
  components: {
    NavigatorMenu,
  },
  data() {
    return {
      reportType: '',
      reportMsg: [{
        label: '个人资料违规',
        options: [{
          value: '头像违规',
          label: '头像违规',
        },{
          value: '签名违规',
          label: '签名违规',
        }]
      },{
        label: '个人信息不实',
        options: [{
          value: '冒名顶替',
          label: '冒名顶替',
        },{
          value: '冒领论文',
          label: '冒领论文',
        },{
          value: '不属于该机构',
          label: '不属于该机构',
        }]
      },{
        label: '个人行为不当',
        options: [{
          value: '发表不当言论',
          label: '发表不当言论',
        },{
          value: '传播虚假言论',
          label: '传播虚假言论',
        },{
          value: '侵犯隐私',
          label: '侵犯隐私',
        },{
          value: '引战',
          label: '引战',
        },{
          value: '垃圾广告',
          label: '垃圾广告',
        }]
      },{
        label: '其他',
        options: [{
          value: '其他原因',
          label: '其他原因',
        }]
      }],
      reportReason: '',
      reportImageUrl: '',
      coverAdvance: require('../assets/images/apple.jpg'),
    }
  },
  methods :{
    sendReport() {
        if(reportMsg.length==0 && reportReason==''){
            this.$message({
              message: '请选择举报类别或输入举报理由！',
              type: 'error'
            })
        }
        else{
          this.$message({
              message: '举报提交成功',
              type: 'success'
            })
        }
    },
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw)
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg'
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG) {
        this.$message.error('Avatar picture must be JPG format!')
      }
      if (!isLt2M) {
        this.$message.error('Avatar picture size can not exceed 2MB!')
      }
      return isJPG && isLt2M
    },
  }
}
</script>

<style scoped>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 120px;
  height: 120px;
  text-align: center;
}
.avatar-uploader-icon svg {
  margin-top: 45px; /* (120px - 28px) / 2 - 1px */
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
